<template>
    
    <a-modal
    width="100%"
    wrapClassName="questionnaire--full-modal"
    :visible="visibleShow" 
    title="查看问卷" 
    @ok="visibleShow = false" 
    :forceRender="true"
    @cancel="visibleShow = false">
        <a-spin size="large" :spinning="spinning" :key="spinningKey">
            <div style="margin-bottom: 20px;">
                <a-button class="blue-btn" type="primary" @click="visibleShow = false">返回</a-button>
                <a-button style="margin-left: 10px;" class="blue-btn" type="primary" @click="refreshClick()">刷新</a-button>
            </div>
            <div class="questionnaire-box">
                <div v-if="viewFailed">
                    <a-result status="warning" title="问卷加载失败。">
                    </a-result>
                </div>
                <div class="questionnaire-data" v-if="!viewFailed">
                    <div style="text-align: center;">
                        <h3>{{ questionnaireData.fwjbt }}</h3>
                        <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ questionnaireData.fwjms }}</h4>
                    </div>
                    <div>
                        <div v-for="(item,index) in questionnaireList" :key="item.id">
                            <span class="title one-t">{{ item.dbt }}</span><!--一级标题-->
                            <div v-for="(secondary,sIndex) in item.wjtmList" :key="secondary.id">
                                <div >
                                    <span class="title topic"> {{sIndex+1}}、{{ secondary.fwjtm }}</span> <!--二级标题-->
                                </div>
                                <div v-if="secondary.fsfkqpf == '是'">
                                    <span>评分：{{ secondary.fpfjg }}</span>
                                </div>
                                <div style="margin-left: 15px;margin-bottom: 15px;" v-if="secondary.fsfczxx == '是' && secondary.fsftxxdyj  == '否'"><!--选项-->
                                    <div 
                                    v-for="(answer,aIndex) in secondary.wjtmxxList" 
                                    :key="answer.id" 
                                    class="answer-select" 
                                    >
                                        <span> {{ answer.fwjtmxx }}</span><!--选项标题-->
                                        <span class="frame" v-if="answer.fsfxz == '否'"></span>
                                        <span class="frame" v-if="answer.fsfxz == '是'">√</span>
                                    </div>
                                </div>
                                <div style="margin-left: 20px; margin-bottom: 15px;" v-if="secondary.fsftxxdyj  == '是'">
                                    <div v-for="(answer,aIndex) in secondary.wjtmxxList" :key="answer.id">
                                        <div>
                                            <span>（{{ answer.fxh }}）条款号</span>
                                            <div>填：{{ answer.ftkh }}</div>
                                        </div>
                                        <div>
                                            <span>需修订内容：</span>
                                            <div>填：{{ answer.fxxdnr }}</div>
                                        </div>
                                        <div>
                                            <span>修订理由：</span>
                                            <div>填：{{ answer.fxdly }}</div>
                                        </div>
                                        <div>
                                            <span>修订意见：</span>
                                            <div>填：{{ answer.fxdyj }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin-left: 20px; margin-bottom: 15px;" v-if="secondary.fsftxczkn == '是'"><!--存在困难-->
                                    <span>存在困难：</span>
                                    <div>填：{{ secondary.fczkn }}</div>
                                </div>
                                <div style="margin-left: 20px; margin-bottom: 15px;" v-if="secondary.fsftxyjjy == '是'"><!--建议-->
                                    <!-- <span v-if="questionnaireList.length !== index+1">意见：</span> -->
                                    <div>填：{{ secondary.fyjjy }}</div>
                                </div>
                                <div style="margin-left: 20px; margin-bottom: 15px;" v-if="secondary.fsftxyxdz  == '是'">
                                    <span>邮箱地址：</span>
                                    <div>填：{{ secondary.fyxdz }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a-spin>
    </a-modal>
    
</template>
<script>
import {wjjbxxPageList,initWjjbxx,selectDjDa,submitWj,deleteBatchWjjbxx,viewWjjbxx,addWjtxtmxx} from './service/index'
export default {
    components:{

    },
    props:{
        questionnaireId:{
            type:String,
            default:'',
            require:false
        }
    },
    data(){
        return{
            spinning:true,
            questionnaireData:{},
            questionnaireList:[],
            viewFailed:false,
            visibleShow:false,
            spinningKey:null,
        }
    },
    watch:{
        questionnaireId:{
            deep:true,
            handler(newValue,oldValue) {
                this.spinning = true
                this.viewWjjbxxData(newValue)
            }
        }

    },
    mounted(){
        // this.viewWjjbxxData(this.questionnaireId)
    },
    updated(){
        this.cancelLoading()
    },
    methods:{
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
        },
        refreshClick(){
            this.spinning = true
            this.spinningKey = Date.now()
            this.cancelLoading()
        },
        viewWjjbxxData(id){
            viewWjjbxx({id:id}).then(res=>{
                if(res.code == 200){
                    this.questionnaireData = res.result.wjjbxx
                    this.questionnaireList = res.result.dbtList
                }else{
                    this.viewFailed = true
                }
            })
        },

    }
}
</script>
<style lang="less" scoped>
.questionnaire-box{
    
    .questionnaire-data{
        height: calc(100vh - 211px);
        overflow-y: auto;
        padding: 15px;
        font-size: 18px;
        .answer-select{
            display: flex;
            align-items: center;
            margin: 5px;
            padding-right: 20px;
            .frame{
                top: 4px;
                margin-left: 5px;
                display: inline-block;
                width: 18px;
                height: 18px;
                text-align: center;
                border: 1px solid #000;
                line-height: 1;
                color: #1890ff;
            }
        }
    }
    .title{
        font-size: 20px;
        

    }
    .one-t{
        display: inline-block;
        margin:10px;
        font-weight: 600;
    }
    .topic{
        font-size: 18 !important;
        display: inline-block;
        margin:10px;
    }
    
}

.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
</style>
<style lang="less">
.questionnaire--full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
    background: #fff !important;
    height: calc(100vh - 108px);
  }
  .ant-modal-footer{
    background: #fff !important;
  }
}
</style>